<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-row style="margin-left:13px;">
      <el-col :span="3">
        <div>
          <em
            style="font-size:20px"
            class="el-icon-info"
            @click="showSingeInfo"
          ></em>
        </div>
      </el-col>

      <el-col :span="3">
        <el-tooltip effect="light" placement="top">
          <div slot="content">
            <div
              v-html="systemReamrk"
              style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
            ></div>
          </div>
          <em
            style="font-size:20px;color:rgb(80, 200, 93);"
            class="el-icon-s-flag"
          ></em>
        </el-tooltip>
      </el-col>

      <el-col :span="3" v-if="data.taxBills && data.taxBills.length > 0">
        <div>
          <em
            :style="{ 'font-size': '20px', color: taxColor }"
            class="el-icon-s-marketing"
            @click="showTaxVs"
          ></em>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="拆税单详情"
      :visible.sync="showDialogVisible"
      width="93%"
      center
    >
      <div>
        <el-table :data="tableData" height="600" style="width: 100%">
          <el-table-column type="index" width="30"> </el-table-column>
          <el-table-column label="运单编号">
            <el-table-column label="客户名称">
              <template slot-scope="scope">
                <el-row> {{ scope.row.waybillNo }}</el-row>
                <el-row v-if="scope.row.customerId">
                  {{ customerMap[scope.row.customerId] }}</el-row
                >
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="放行时间" prop="releaseTime">
          </el-table-column>

          <el-table-column label="中文品名">
            <el-table-column label="DESCRIPTION" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-row> {{ scope.row.declareCn }}</el-row>
                <el-row> {{ scope.row.description }}</el-row>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="货描">
            <el-table-column label="材质" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-row> {{ scope.row.describe }}</el-row>
                <el-row> {{ scope.row.material }}</el-row>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="HSCODE">
            <el-table-column label="ASIN NO" width="130">
              <template slot-scope="scope">
                <el-row> {{ scope.row.hsCode }}</el-row>
                <el-row> {{ scope.row.asinNo }}</el-row>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="数量">
            <el-table-column label="销售价格">
              <template slot-scope="scope">
                <el-row> {{ scope.row.count }}</el-row>
                <el-row> {{ scope.row.salePrice }}</el-row>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="手续费(单价)">
            <el-table-column label="手续费(合计)"
              ><template slot-scope="scope">
                <el-row> {{ scope.row.charge }}</el-row>
                <el-row> {{ scope.row.totalCharge }}</el-row>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column
            label="运输管理费报关费进口代理手续费"
            prop="carryCharge"
          >
          </el-table-column>
          <el-table-column label="FBA配送费(单价)">
            <el-table-column label="FBA配送费(合计)">
              <template slot-scope="scope">
                <el-row> {{ scope.row.fbaShippingFee }}</el-row>
                <el-row> {{ scope.row.totalFbaShippingFee }}</el-row>
              </template></el-table-column
            >
          </el-table-column>
          <el-table-column label="经费扣除后" prop="expenditure">
          </el-table-column>

          <el-table-column label="消费税10%">
            <el-table-column label="经费扣除后">
              <template slot-scope="scope">
                <el-row> {{ scope.row.consumptionTax }}</el-row>
                <el-row> {{ scope.row.consumptionDeduct }}</el-row>
              </template></el-table-column
            >
          </el-table-column>
          <el-table-column label="税率">
            <el-table-column label="关税额">
              <template slot-scope="scope">
                <el-row> {{ scope.row.taxRate }}</el-row>
                <el-row> {{ scope.row.tariffTax }}</el-row>
              </template></el-table-column
            >
          </el-table-column>
          <el-table-column label="申报金额" prop="declarePrice">
          </el-table-column>
          <el-table-column label="总申报金额" prop="totalDeclarePrice">
          </el-table-column>
          <el-table-column label="应付税金" prop="payTax"> </el-table-column>
          <el-table-column label="税金比例">
            <el-table-column label="申报比例">
              <template slot-scope="scope">
                <el-row> {{ scope.row.taxRatio }}</el-row>
                <el-row> {{ scope.row.declareRatio }}</el-row>
              </template></el-table-column
            >
          </el-table-column>

          <el-table-column label="关税扣除后">
            <el-table-column label="税前价格">
              <template slot-scope="scope">
                <el-row> {{ scope.row.tariffDeduct }}</el-row>
                <el-row> {{ scope.row.beforeTax }}</el-row>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="起运港">
            <el-table-column label="目的港">
              <template slot-scope="scope">
                <el-row v-if="scope.row.shipmentPort">
                  {{ airPortMap[scope.row.shipmentPort] }}</el-row
                >
                <el-row v-if="scope.row.destinationPort">
                  {{ airPortMap[scope.row.destinationPort] }}</el-row
                >
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog title="税单" :visible.sync="showTaxVisible" width="40%" center>
      <div>
        <el-table
          :data="taxData"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          height="400"
          style="width: 100%"
        >
          <el-table-column type="index" width="30"> </el-table-column>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="税单" prop="fileName" min-width="380">
          </el-table-column>

          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <el-tooltip content="预览">
                <em
                  style="color:green;"
                  class="el-icon-view text-xl margin-right-sm"
                  @click="previewFile(scope.$index, scope.row)"
                ></em>
              </el-tooltip>
              <el-tooltip content="下载">
                <em
                  style="color:#57dfecfa;"
                  class="el-icon-download pointer margin-right-sm text-xl"
                  @click="dowmLoadWaybillFile(scope.$index, scope.row)"
                ></em>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          style="margin-top:20px;margin-left:250px"
          @click="batchDowmLoadWaybillFile"
          >批量下载</el-button
        >

        <el-button
          type="primary"
          style="margin-top:20px;margin-left:10px"
          @click="generateReceiveOrPayFee"
          >生成应收应付</el-button
        >
        <el-button
          type="primary"
          style="margin-top:20px;margin-right:10px"
          @click="allocationTaxBill"
          >分配税单</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      showTaxVisible: false,
      fullscreenLoading: false,
      customerMap: {},
      airPortMap: {},
      tableData: [],
      taxData: [],
      showDialogVisible: false,
      systemReamrk: "",
      taxColor: "rgb(92, 215, 75)",
      multipleSelection: []
    };
  },

  methods: {
    batchDowmLoadWaybillFile(){
      if (!this.multipleSelection || this.multipleSelection.length===0) {
          this.$message.error("请选择需要下载的税单");
          return;
      }
      var params = {};
      var param6 = [] ;
      this.multipleSelection.forEach(element => {
        param6.push(element.filePath);
      });
      params.param6 = param6;
      ajax("batchDownLoad", params).then(
        res => {
          console.log(res);
           var filePath = res.path + res.fileName;
            var path = constant.FILE_SERVER + "/" + filePath;
            console.log(path);
            window.open(path, "_blank");
        },
        error => {
          console.log(error);
          this.$message.error("下载失败");
        }
      );
    },
    generateReceiveOrPayFee() {
      this.fullscreenLoading = true;
      ajax("generateReceiveOrPayFee", this.data).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code === 200) {
            this.$message.success("生成成功");

            setTimeout(() => {
              window.location.reload(true);
            }, 3000);
          } else {
            this.$message.error("生成失败" + res.message);
          }
        },
        error => {
          console.log(error);
          this.$message.error("生成失败");
        }
      );
    },

    allocationTaxBill() {
      this.fullscreenLoading = true;
      ajax("allocationTaxBill", this.data).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code === 200) {
            this.$message.success("分配成功");

            setTimeout(() => {
              window.location.reload(true);
            }, 3000);
          } else {
            this.$message.error("分配失败" + res.message);
          }
        },
        error => {
          console.log(error);
          this.$message.error("分配失败");
        }
      );
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    previewFile(index, row) {
      console.log(row);
      var filePath = row.filePath;
      var path = constant.FILE_SERVER + "/" + filePath;
      console.log(path);
      window.open(path, "_blank");
    },
    codeEfilter(value) {
      value = encodeURIComponent(value);
      // .replace("#", "%23")
      // .replace("%", "%25")
      // .replace("&", "%26")
      // .replace("+", "%2B")
      // .replace("//", "%2F")
      // .replace("=", "%3D")
      // .replace("!", "%21")
      // .replace("*", "%2A")
      // .replace('"', "%22")
      // .replace("'", "%27")
      // .replace("(", "%28")
      // .replace(")", "%29")
      // .replace(";", "%3B")
      // .replace(":", "%3A")
      // .replace("@", "%40")
      // .replace("$", "%24")
      // .replace(",", "%2C")
      // .replace("/\[/g", "%5B")
      // .replace("/\]/g", "%3B")
      // .replace("?", "%3F");

      return value;
    },
    /** 直接通过保存到数据库的地址下载文件*/
    dowmLoadWaybillFile(index, row) {
      var fileName = row.fileName;

      var uploadpath = "/";
      console.log(fileName);

      var fileUrl = constant.FILE_SERVER + uploadpath + row.filePath;
      console.log(fileUrl);
      // fileUrl = this.codeEfilter(fileUrl);
      location.href =
        constant.API_SERVER +
        "/open/downloadFileByHttp?path=" +
        fileUrl +
        "&fileName=" +
        fileName;
    },

    showSingeInfo() {
      var param = {};
      this.fullscreenLoading = true;
      ajax("initOptions", param).then(
        res => {
          this.fullscreenLoading = false;
          this.showDialogVisible = true;
          this.tableData = this.data.subTaxs;
          if (res.code === 200) {
            this.customerMap = res.data["customerMap"];
            this.airPortMap = res.data["airPortMap"];
            console.log(this.customerMap);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    showTaxVs() {
      this.taxData = this.data.taxBills;
      this.showTaxVisible = true;
    }
  },

  mounted() {
    this.systemReamrk = this.data["sysRemark"];
    if (this.data["allotion"] && this.data["allotion"] === 1) {
      this.taxColor = "rgb(102, 177, 255)";
    }
  }
};
</script>

<style>
.top {
  text-align: center;
}
</style>
